<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>
<body>
<h1>登陆</h1>
<form method="post" action="/login">
    <div>
        用户名：<input type="text" name="username" id="username"/>
    </div>
    <div>
        密码：<input type="password" name="password" id="password"/>
    </div>
    <div>
        <label><input type="checkbox" name="remember-me"/>自动登录</label>
        <button type="submit">立即登陆</button>
    </div>
</form>
<button id="loginBtn">ajax登录</button>
<script>
    $("#loginBtn").click(function () {

        var username = $.trim($("#username").val());
        var password = $.trim($("#password").val());

        if(username == "" || password == ""){
            alert("请输入账号或密码");
            return ;
        }


        var input = {
            "username": username,
            "password": password
        }

        $.ajax({

            "url": "/login",
            "type": "POST",
            "data": input,
            //"contentType": "application/json;charset=UTF-8",  这是我的疑问所在
            "dataType": "json",
            "success": function (response) {
                // 关闭加载层

                var result = response;
                if (result == "true" || result == true) {
                    alert("登录成功++++++");
                    location.href="/";

                }else if(result=="false" || result == false){

                    alert("登录失败-----");
                }

            },
            "error": function (response) {
                // 关闭加载层
                alert("error");

            }

        })

    })


</script>
</body>
</html>
